<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/AdminIndex' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dialog :visible.sync="changeFaceDialog" title="走马灯图片修改" width="20%" >
      <div style="border:1px dashed #000;border-radius: 2px ; width: 185px;margin-left: 40px">
        <el-upload
            name="picFile"
            class="avatar-uploader"
            :action="this.path"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="cursor: pointer;">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-dialog>
    <a-card style="width: 40%;float: left;height: 320px">
      <a-icon type="pic-center"  style="margin-bottom: 5px;font-size: 20px"/>
      <div id="banner" >
        <!--动态将图片轮播图的容器高度设置成与图片一致-->
        <el-carousel  height="250px">
          <!--遍历图片地址,动态生成轮播图-->
          <el-carousel-item v-for="(item,index) in img_list" :key="item">
            <img :src="item" alt="" style="width: 100% ;height: 250px" @click="changeFace(index)">
          </el-carousel-item>
        </el-carousel>
      </div>
    </a-card>
    <a-card style="width: 30%; float: left;height: 320px;margin-left: 10px">
      <a-icon type="pie-chart" style="font-size: 20px" />
      <div id="myChart" style="width:100%;height:300px" ></div>
    </a-card>
    <div style="width: 29%;float: right " >
      <div style="background: #ECECEC; margin-left: 15px"  >
      <a-row :gutter="15" >
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="用户总数"
                :value="10"
                :value-style="{ color: '#3f8600' }"
                style="margin-right: 50px ;height: 50px"
            >

            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="产品总数"
                :value="12"
                class="demo-class"
                :value-style="{ color: '#cf1322' }"
                style="height: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="15" style="margin-top: 10px">
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="卖家总数"
                :value="8"
                :value-style="{ color: '#3f8600' }"
                style="margin-right: 50px ;height: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="产品类别"
                :value="5"
                class="demo-class"
                :value-style="{ color: '#cf1322' }"
                style="height: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="15" style="margin-top: 10px">
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="卖家总数"
                :value="2"
                :value-style="{ color: '#3f8600' }"
                style="margin-right: 50px ;height: 50px"
            >

            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-statistic
                title="今日访问"
                :value="25"
                class="demo-class"
                :value-style="{ color: '#cf1322' }"
                style="height: 50px"
            >
            </a-statistic>
          </a-card>
        </a-col>
      </a-row >
    </div>
    </div>
    <a-card style="width: 30%; float: left;height: 320px; margin-top: 10px ;text-align: center;padding-top: 10px">
      <a-icon type="clock-circle" style="float: left; font-size: 20px" />
      <clock color="#4AB7BD" size="250px" style="margin-right: 30px"></clock>
    </a-card>
    <a-card style="width: 40%; float: left;height: 320px; margin-top: 10px;margin-left: 10px">
      <a-icon type="bar-chart" style="font-size: 20px" />
      <div id="myChart2" style="width:100%;height:300px"></div>
    </a-card>
    <a-card style="width: 28%; float: left;height: 320px; margin-top: 10px;margin-left: 17px">
      <a-icon type="pie-chart" style="font-size: 20px" />
      <div id="myChart1" style="width:100%;height:260px"></div>
    </a-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Clock from 'vue-clock2';
export default {
  components: {Clock},
  name: "AdminInfo",
  data() {
    return {
      imageUrl:'',
      path:'',
      changeFaceDialog:false,
      productPk:[],
      bill_num:'',
      money_sum:'',
      product_kind_num:'',
      product_num:'',
      equipment_num:'',
      equipment_kind_num:'',
      kind1:'',
      kind2:'',
      img_list:[
        "http://localhost:9001/getImage/face0.jpg",
        "http://localhost:9001/getImage/face1.jpg",
        "http://localhost:9001/getImage/face2.jpg",
      ],
    }
  },
  mounted() {
    this.drawLine();
    this.draw2();
    this.draw3();
  },
  methods: {

    async drawLine() {
      // const {data: res1} = await this.$http.get("getSum", {params: {
      //   kind:1,
      //   }});
      // this.kind1 =res1.data;
      // const     {data: res2} = await this.$http.get("getSum", {params: {
      //     kind:2,
      //   }});
      // this.kind2 =res2.data;
      //
      // const {data: res3} = await this.$http.get("getSum", {params: {
      //     kind:3,
      //   }});
      // this.bill_num =res3.data;
      // const     {data: res4} = await this.$http.get("getSum", {params: {
      //     kind:4,
      //   }});
      // this.money_sum =res4.data;
      // const {data: res5} = await this.$http.get("getSum", {params: {
      //     kind:5,
      //   }});
      // this.equipment_kind_num =res5.data;
      // const     {data: res6} = await this.$http.get("getSum", {params: {
      //     kind:6,
      //   }});
      // this.equipment_num=res6.data;
      // const {data: res7} = await this.$http.get("getSum", {params: {
      //     kind:7,
      //   }});
      // this.product_kind_num =res7.data;
      // const     {data: res8} = await this.$http.get("getSum", {params: {
      //     kind:8,
      //   }});
      // this.product_num=res8.data;

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))

      // 绘制图表
      myChart.setOption({
        title: {
          text: '用户信息统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '统计信息',
            type: 'pie',
            radius: [20, 95],
            center: ['50%', '55%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              {value: 50, name: '买家'},
              {value: 20, name: '卖家'},
            ]
          },
        ]
      });
    },
    async draw2() {

      let myChart = echarts.init(document.getElementById('myChart1'))
      myChart.setOption({
        title: {
          text: '产品类别统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '7%',
          left: 'center'
        },
        series: [
          {
            name: '产品信息',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:  [
              {value: 50, name: '产品1'},
              {value: 20, name: '产品2'},
              {value: 20, name: '产品3'},
            ]
          }
        ]
      })

    },


    async draw3() {
      let x=['产品1','产品2','产品3','产品4','产品5',]
      let y=[6,2,3,1,5]

      let myChart = echarts.init(document.getElementById('myChart2'))
      myChart.setOption({
        title: {
          text: '产品种类数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: x,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '具体次数',
            type: 'bar',
            barWidth: '60%',
            data: y
          }
        ]
      })

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.changeDialog=false
      this.$message.success("图像修改成功！")
      this.$router.go(0)
    },
    async beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.changeDialog = false
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.changeDialog = false
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    changeFace(index){
      this.changeFaceDialog=true;
      this.path="http://localhost:9000/up?user_id=face"+index;
    }
  },
}

</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>